这是我的博客的第一篇文章，我想在这篇文章里记录一下自己搭建这个博客的全过程和途中踩过的坑，一是为了记录一下，二是方便以后换电脑需要再次搭建的时候有个参考，如果能帮助到其他人就更好了。
搭建博客起因
前段时间刚开始自学python和机器学习，为了找到最佳的笔记方案，我上知乎搜“学习编程怎么做笔记？”有的人说不用做笔记，有的人说用 gitbook，有的人说直接记在代码注释里，有的人说直接记在 github 的 wiki 或者 issue 页面。但是还看到许多人推荐记录在自己的独立博客上，作为一个一直希望有自己博客的人，我立马萌生了自己搭博客的想法，但是碍于麻烦一直有些动摇，直到这篇文章《为什么你要写博客？》打动了我，它让我下定决心搭建自己的博客并坚持写点东西，不仅可以放自己学习过程中的笔记，作为一个话痨，还可以放一些自己的随想和读书笔记，何乐而不为？
总的来说，我认为写博客能给我以下的好处：
- 梳理自己学到的东西
- 通过沉下心写点东西消磨自己的浮躁心态
- 小时候经常写日记，长大后放弃了这个习惯，希望这个博客能让我重拾记录自己内心，与自己对话的习惯
- 记录自己的生活和成长
- 搭建独立博客本身就是一件非常 geek 的事情（虽然是用的框架）
那么废话不多说，直接开始吧！
搭建过程
既然选择搭博客，那么怎么搭呢？我继续搜“如何搭建独立博客？”知乎上推荐比较多的方案是 静态博客生成器 + github pages + markdown，静态博客较动态博客的好处在于浏览速度快、方便简单且无须数据库，让你专注于写作本身。其次，Github Pages 是 github 上用于介绍项目的页面，不过，由于其免费的 300M 空间，把我们的博客放在上面再合适不过了。另外 markdown 指的是一种轻量级的标记语言，可以边写作边排版，非常方便。
静态博客生成器是一种把你写的文章变成漂亮的静态网页的博客框架，你只要负责写作，它负责帮你生成网页然后部署到 Github Pages 上，这就使得搭建博客变成了一件非常方便的事情。目前比较流行的静态博客生成器有 hexo 和 hugo。
我首先尝试了 hugo，他是用GO语言写成的，直接下载二进制文件然后安装就行了，非常方便。但是由于在应用 hugo 一个主题时出现了一个bug，始终无法生成页面，折腾了好几天，最后心力交瘁只能放弃 hugo，但不得不说 hugo 生成页面的速度非常快而且安装很方便，感兴趣的可以尝试一下。
于是最后的方案为 hexo + github pages + markdown。
搭建过程参考以下链接：
- 使用 hexo+github 搭建免费个人博客详细教程
- 如何搭建一个独立博客——简明 Github Pages 与 Hexo 教程
- 快速使用 Hexo 搭建个人博客(youtube)
- 可能是最详细的 Hexo + GitHub Pages 搭建个人博客的教程
hexo的下载安装
hexo介绍
- hexo 是一个基于 Node.js 快速、简洁且高效的博客框架。
- hexo 中文官网
安装前的准备
由于 hexo 是一个基于 Node.js 的博客框架，所以我们需要安装 Node.js，另外因为我们需要使用 Git 命令部署到 github 上，所以还需要安装 Git，两者的安装教程如下。
特别要注意安装 Node.js 和 Git 时是否设置了环境变量，点击win+R =》输入 “cmd” => 输入命令 “path”，查看是否有 Node.js 和 Git 所在的文件夹，如果没有则可以根据网上教程设置。另外不要忘了根据说明配置Git。最后我们在 cmd 中分别输入
node -v和npm -v和git version看看是否安装成功，如果返回版本号则说明安装成功。如下图所示。
安装 hexo
在某个盘创建文件夹 hexo，进入该文件夹，输入以下命令。
1 | npm install hexo-cli -g |
有时会得到如下图所示的 warn，无视之。
然后输入 hexo version 命令判断是否安装成功，正确输出如下图所示。
我第一次安装时报错显示‘hexo’ 不是内部或外部命令，也不是可运行的程序，解决办法如下：
在
hexo文件夹下用命令行输入npm install hexo --save安装 hexo，然后在 hexo 文件夹可以发现一个名为node_modules的文件夹，进入该文件夹，再进入第一个文件夹.bin，复制当前路径F:\hexo\node_modules\.bin加入环境变量（如果不知道怎么加可以自行搜索），现在使用hexo version命令就可以得到正确的输出了！
博客文件夹的初始化
现在我们开始初始化我们的博客，假设我们放博客资源的文件夹叫 chenyichen.github.io (可以把 chenyichen 改成自己的名字)，在 hexo 根目录用命令行输入
1 | hexo init chenyichen.github.io |
然后你会发现在根目录下出现了一个名为 chenyichen.github.io 的文件夹，点进去发现如下的目录结构：
初始化成功！
生成你的第一个博客页面！
下面我们在 chenyichen.github.io 文件夹里用命令行输入以下命令：
1 | hexo g #用来生成网页，g 是 generate 的缩写 |
如图所示：
现在打开浏览器，在搜索框内输入：
1 | localhost:4000 |
点击回车，我们可以看到我们的第一个博客页面，Hello World！
主题的安装和配置
主题推荐
我们刚刚建立了我们的第一个博客，有点丑对不对？没事儿，hexo 社区提供各式各样的博客主题供你选择。但是这上百个主题对于选择困难症来说真的是太痛苦了！到底怎么选呢？我有两个建议。
第一就是你可以上知乎搜“hexo 主题”，里面有大神用爬虫爬下来 github 上最火的主题排序，看看哪些主题用的人比较多；第二就是一定不要选主题配置文档含糊不清的，之前我用了一个主题，在配置过程中各种出问题，文档介绍极其不清楚，虽然主题非常好看，但无奈怎么都编译不过，折腾了好几天只得放弃。这是现在我用的主题的配置文档，博客的每一个细节都介绍得非常清楚，安利一波。
主题的安装
你可以使用 git 命令将主题 clone 下来，但是鉴于墙的原因，速度有时非常慢，所以建议直接下载压缩包然后解压的方式。
以我现在用的主题 melody 为例，进入该主题的 github 页面，点击右边的绿色按钮，再点击 Download ZIP，保存到你博客文件夹下的 theme 文件夹下，接着解压到当前文件夹，然后我们就得到了一个名字为主题名字的文件夹，为了等下配置方便，我们把该该文件夹重命名为一个好记的名字，如“melody”，如下图所示。
现在我们进入放博客的文件夹的根目录，你会发现一个名为“_config.yml”的文件，用编辑器打开它，把倒数第五行的 theme: landscape 改成 theme: melody，保存文件，现在运行命令 hexo server 然后在浏览器输入 localhost:4000，看看是不是变成了你想要的主题！
主题的配置
主题的配置一般在你下载主题的 github 页面会有详细的说明，比如 melody 主题说明文档，所以就不详细说明了。有时候一些主题里没有的修改项，比如你需要修改 banner 的字体，只需要到该主题的文件夹里寻找对应的 css 文件然后修改即可，这个就需要你自己慢慢试慢慢找了。
博客写作
写作工具
我们的博客使用 markdown 进行写作，那么什么是 markdown 呢？有关它的介绍可以看这个：
那么我们该用什么编辑器来写 markdown 呢？请看这个：
如何开始？
你可以在放博客的文件夹打开命令行，输入以下命令：
1 | hexo new 文章的名字 |
然后我们发现在 source 文件夹下的 _post 文件夹生成了一个 .md 文件，也就是一个 markdown 文件，如下图所示。
打开它可以发现只有如下文字：
1 | --- |
这是某种类似于“头文件”的东西，决定了这篇文章的属性，通过添加或者修改这些关键字你就可以修改文章的标题、日期、分类、标签等属性，详细的属性介绍在这里可以找到。
你也可以自己在编辑器里创建 markdown 文件然后开始写文章，但是你必须先在前面加上这些“头文件”，然后把文章移动到 source 文件夹下的 _post 文件夹里。
有关写作中图片的插入问题
搭建独立博客写作最麻烦的一件事儿就是给文章添加图片，为啥麻烦呢，如果你把图片随文字一起上传到 github，那么它免费给你的 300M 空间也捉襟见肘，如果你使用图床（也就是把图片先传到网上的服务器，然后添加图片的时候引用它的链接），那么添加图片的步骤将会非常繁琐。
图床推荐最多的就是七牛图床，还有其他的比如微博图床和极简图床等等，网上的推荐很多，可以自行搜索，上传完图片后会得到一个图片的外链，复制这个链接，在需要引用图片的地方打如下文字就可以啦：
那么如果你要上传本地图片咋办呢？我的建议是绝对路径引用。在 source 文件夹下建立名为 img 的文件夹专门用来放图片，再给每篇文章专门建立文件夹放这篇文章的图片，比如“我的第一篇博客”，图片名为 1.jpg，那么我引用该图片的时候就输入以下命令就可以啦：
有关图片引用的说明还可以参考以下链接：
2018/8/3 更新，找到了更好的图床解决方案：用 github 做图床，然后配合一键上传图床工具 picgo，完美解决 markdown 图片上传问题，详细用法见 picgo官网
把博客部署上线
设置 github
最激动人心的时刻到了，当你安装好漂亮的主题，写好优秀的文章，就该部署上线让更多人看到了！由于 github 推出一个 github pages 服务，用来展示我们的网页，所以我们可以把我们的博客网页部署到那个上面，当别人在看我们的博客时，其实就是在看我们的 github pages 页面。
首先，我们需要注册一个 github 账号，假设你的 github 用户名是 zemin，我们建立一个项目名为：
zemin.github.io
注意必须与你的用户名一模一样并严格按照格式来，否则待会儿不能直接通过 zemin.github.io 访问我们的博客，如下图所示，
把博客与 github 联系起来
我们在运行命令 hexo g 之后，可以在博客文件夹根目录发现一个名为 public 的的文件夹，这个就是我们 hexo 框架形成的网页文件，将它上传到我们刚刚建立的项目 zemin.github.io 里，便可以在我们的 github pages 页面看到我们的博客了，而这个页面的网址就是“zemin.github.io”了。
为了方便地上传我们的博客文件，我们用 SSH 密匙将博客与 github 联系起来，这个步骤有许多教程写的很好，我参考使用 Github Pages 建独立博客和可能是最详细的 Hexo + GitHub Pages 搭建个人博客的教程写下以下教程：
1.生成 SSH
在命令行输入以下命令：
1 | ssh-keygen -t rsa -C "你的邮箱" |
一直点击回车直到碰到以下文字：
1 | Enter passphrase (empty for no passphrase): |
第一个要求你输入密码，在部署的时候用得到，第二个要求你重复密码，如果不想要密码直接回车即可，我觉得个人电脑的话没必要输入密码。当碰到如下文字则说明运行成功。
2.把 SSH 添加进 github
SSH 一般放在路径 C:\Users\pc\.ssh\id_rsa.pub 下，如果没有再仔细找找，否则是上一步出了问题，用编辑器打开这个文件 .pub 文件，复制所有的文字。
登陆 github。点击右上角的 Settings—->SSH and GPG keys—->New SSH key，Title 可以填你项目的名字，然后把 .pub 里复制的文字再粘贴进 Key 里，最后点击 Add SSH Key 绿色按钮，完成配置。
3.测试是否配置成功
在命令行输入以下命令，切记原封不动输入：
1 | ssh -T git@github.com |
一直回车，碰到 Are you sure you want to continue connecting (yes/no)? 便输入“yes”，如果最后返回如下文字则配置成功：
1 | Hi XXX! You've successfully authenticated, but GitHub does not provide shell access. |
4.设置 Git 的个人信息
命令行输入以下命令：
1 | git config --global user.name "你的真名" |
5.配置 _config.yml
进入你在 github 的项目并点击右侧 Clone and download 绿色按钮，选择 Clone with SSH，并复制下框里的一串文字，如下图所示。
然后用编辑器打开博客根目录下的 _config.yml 文件，找到 # Deployment（布署） 部分，并作如下修改：
1 | # Deployment |
git@github.com:yichenchan/yichenchan.github.io.git 处就是你刚刚复制的一串文字
那如果我们还需要部署在 Coding.net 上该怎么办呢？同样复制下 Coding.net 上该项目的 SSH，然后 # Deployment 修改为以下写法：
1 | # Deployment |
做完这些，我们的本地博客就与 github 或者 coding.net 联系起来了！
让我们的博客上线吧！
首先我们需要安装一个插件，在博客根目录用命令行输入：1
npm install hexo-deployer-git --save
安装成功后，在你博客文件夹的根目录用命令行执行以下命令：1
2
3hexo clean #删除 public 里的文件
hexo g #生成新的 public 文件
hexo d #部署到 github 上
或者合并成一句：1
hexo d -g
由于网络的原因，布署的时间可能会非常长，而且经常会卡在一个地方不动，碰到这种情况请耐心等待，当布署成功之后，会有 git done 的提示。
现在打开浏览器输入 zemin(改成你自己的).github.io，我们就可以看到我们的博客上线啦！
给博客一个好记的名字（域名）
虽然到目前为止，我们成功地上线了我们的博客，但是每次看到域名后面的 github.io 总有种不是自己的博客的感觉，既然是独立博客，我们就应该有个性化的独立的名字，最后我们试着给它一个好记的域名。
注册你自己的域名
首先我们得有自己的一个域名，在 GoDaddy 或者万网都可以用低价买到自己中意的域名，但是由于万网的域名解析现在需要实名制，而 GoDaddy 是国外的网站不需要实名制所以我选择在后者购买域名，买下的 chenyichen.xyz 大概第一年七块钱，还是很便宜的。
将你的域名与 XXX.github.io 绑定
我们刚刚注册的域名目前还是空的，我们需要用 DNS解析把该域名指向我们的 xxx.github.io，使得其他人在输入 chenyichen.xyz 的时候可以直接跳转到我的 yichenchan.github.io。DNS 就是专门负责把域名解析为 IP 地址的系统，我们也可以通过 CNAME 直接把我们的域名指向另一个域名，这样就不用去搜 IP 地址，更加方便，下面介绍该怎么做，以 GoDaddy 的 DNS 为例，如果你是在万网买的域名，可以进入万网的域名控制台，操作大同小异。
1.将购买的域名指向 XXX.github.io
进入 GoDaddy 的“我的产品”页面，找到你刚刚买的域名，点击右侧的“DNS”，如下图所示：
点击右边的铅笔符号即可修改，把 A 类型的“值”（“指向”）改成你网站的IP地址，把 CNAME 类型的“名称”（“主机”）改成“www”，“值”（“指向”）改成你的网站域名即“yichenchan.github.io”，“TTL”都自定义为“6000”，如下图所示。
如何知道你网站的IP地址呢，在命令行输入
ping yichenchan.github.io(换成自己的二级域名) 即可。
2.修改 _config.yml
其实不是很确定这步需不需要，但是以防万一做一下。
用编辑器打开博客根目录的 _config.yml 文件，找到如下代码：
url: http://yoursite.com
改成：
url: http://chenyichen.xyz（你自己的域名）
3.建立 CNAME 文件
在博客目录下的 source 文件夹里新建一个没有拓展名的文件（可以用编辑器新建），然后命名为CNAME，在里面写上你自己购买的域名，然后保存即可。
4.修改 github pages 设置
进入你在 github 上的博客项目，点击 setting如下图所示：
往下滑，找到“GitHub Pages”设置，在“Custom domain”下的输入框输入你购买的域名，然后点击“save”，如果你需要让它使用 https 的话，可以点击下面的“Enforce HTTPS”，大功告成！！
一般来说，DNS解析需要一段时间，第二天再打开你的浏览器，输入只属于你自己的域名，看看你的博客是不是映入眼帘!!赶紧发条朋友圈炫耀吧hiahia！！
建站感想
虽然网上 hexo+github pages 建站的教程数不胜数，但是希望按照自己的思路来写一篇教程，一是为了发表一篇博客纪念一下建站，二是为了练习一下 markdow 的语法，如果有人能看到这篇教程并得到帮助那更是再好不过了。
作为一个小白，第一次拥有自己的小站，就感觉有了自己一个小窝一样。前前后后折腾了半个月，最后在 chenyichen.xyz 打开自己的博客的感觉真的很棒！不过建站的初衷还是为了能够记录一下自己的学习经历，生活感想，希望自己能坚持更新自己的博客吧，毕竟博客的价值在于其内容而不是他的外表，最后贴一下自己建站过程中参考的网站，感谢这些无私提供教程的大佬，还有感谢本博客主题的开发者Molunerfinn。
